<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }

        .test-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }

        button:hover {
            background: #0056b3;
        }

        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }

        .success {
            background: #d4edda;
            color: #155724;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
        }

        .warning {
            background: #fff3cd;
            color: #856404;
        }
    </style>
</head>

<body>
    <h1>复制功能测试</h1>

    <div class="test-section">
        <h2>测试1：基础复制功能</h2>
        <p>测试链接：<code id="testUrl">https://example.com/test-image.jpg</code></p>
        <button onclick="testBasicCopy()">📋 测试基础复制</button>
        <div id="result1" class="result"></div>
    </div>

    <div class="test-section">
        <h2>测试2：现代API复制</h2>
        <button onclick="testModernCopy()">📋 测试现代API复制</button>
        <div id="result2" class="result"></div>
    </div>

    <div class="test-section">
        <h2>测试3：文化图片页面同样的复制函数</h2>
        <button onclick="simpleCopy('https://example.com/culture-image.jpg')">📋 测试simpleCopy函数</button>
        <div id="result3" class="result"></div>
    </div>

    <div class="test-section">
        <h2>测试4：手动复制对话框</h2>
        <button onclick="showCopyDialog('https://example.com/manual-copy-test.jpg')">📋 测试手动复制对话框</button>
    </div>

    <script>
        // 显示结果
        function showResult(elementId, message, type) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
        }

        // 测试1：基础复制功能
        function testBasicCopy() {
            const text = document.getElementById('testUrl').textContent;
            console.log('测试基础复制:', text);

            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);

            try {
                textArea.focus();
                textArea.select();
                const success = document.execCommand('copy');
                document.body.removeChild(textArea);

                if (success) {
                    showResult('result1', '✅ 基础复制成功！请尝试粘贴验证', 'success');
                } else {
                    showResult('result1', '❌ 基础复制失败', 'error');
                }
            } catch (e) {
                document.body.removeChild(textArea);
                showResult('result1', '❌ 基础复制异常: ' + e.message, 'error');
            }
        }

        // 测试2：现代API复制
        async function testModernCopy() {
            const text = 'https://example.com/modern-api-test.jpg';
            console.log('测试现代API复制:', text);

            if (navigator.clipboard) {
                try {
                    await navigator.clipboard.writeText(text);
                    showResult('result2', '✅ 现代API复制成功！', 'success');
                } catch (e) {
                    showResult('result2', '❌ 现代API复制失败: ' + e.message, 'error');
                }
            } else {
                showResult('result2', '⚠️ 浏览器不支持现代复制API', 'warning');
            }
        }

        // 测试3：文化图片页面的simpleCopy函数
        function simpleCopy(text) {
            console.log('=== 复制功能调用 ===');
            console.log('要复制的文本:', text);

            // 创建临时文本区域
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            textArea.style.top = '-9999px';
            textArea.style.opacity = '0';
            document.body.appendChild(textArea);

            try {
                textArea.focus();
                textArea.select();
                textArea.setSelectionRange(0, 99999);

                const successful = document.execCommand('copy');
                console.log('复制结果:', successful);

                if (successful) {
                    showResult('result3', '✅ simpleCopy函数复制成功！', 'success');
                } else {
                    showCopyDialog(text);
                    showResult('result3', '⚠️ 自动复制失败，已显示手动复制对话框', 'warning');
                }
            } catch (err) {
                console.error('复制异常:', err);
                showCopyDialog(text);
                showResult('result3', '❌ 复制异常，已显示手动复制对话框', 'error');
            } finally {
                document.body.removeChild(textArea);
            }
        }

        // 显示复制对话框
        function showCopyDialog(text) {
            const dialog = document.createElement('div');
            dialog.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
            `;

            dialog.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; max-width: 90%;">
                    <h3>📋 复制链接</h3>
                    <p>请手动复制以下链接：</p>
                    <textarea readonly style="width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace;">${text}</textarea>
                    <div style="text-align: right; margin-top: 15px;">
                        <button onclick="this.closest('div').parentElement.remove()" style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">关闭</button>
                    </div>
                </div>
            `;

            document.body.appendChild(dialog);

            const textarea = dialog.querySelector('textarea');
            textarea.focus();
            textarea.select();

            dialog.onclick = (e) => {
                if (e.target === dialog) {
                    dialog.remove();
                }
            };
        }

        // 页面加载完成提示
        document.addEventListener('DOMContentLoaded', function () {
            console.log('复制功能测试页面加载完成');
            console.log('浏览器信息:', navigator.userAgent);
            console.log('是否支持现代复制API:', !!navigator.clipboard);
            console.log('是否为安全上下文:', window.isSecureContext);
        });
    </script>
</body>

</html>